.home-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;

	.three-area {
		width: 100%;
		// 别问为啥不能100%,问就是只要100%就会滚动┐(´-｀)┌
		height: 99.9%;
		overflow: hidden;

		.three-box {
			height: 100%;
			width: 100%;
		}

		:deep(#myDialog) {
			font-size: 8px;

			.box-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				animation: moveUpDown 3s infinite;

				.title {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					color: #fff;
				}

				.label-text {
					font-family: Source Han Sans CN, Source Han Sans CN;
					color: #ccddff;

					.label-value-green {
						color: #5cdd2e;
						font-weight: bold;
					}
					.label-value-red {
						color: #ff4a4a;
						font-weight: bold;
					}
				}

				.tip-green {
					width: 80px;
					height: 40px;
					padding: 5px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					background-color: rgba(22, 29, 38, 0.5);
					opacity: 0.9;
					border: 1px solid #329550;
					box-shadow: inset 0px 0px 15px 0px #329550;
				}

				.tip-red {
					width: 80px;
					height: 40px;
					padding: 5px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					background-color: rgba(22, 29, 38, 0.5);
					opacity: 0.9;
					border: 1px solid #882c2c;
					box-shadow: inset 0px 0px 15px 0px #882c2c;
				}

				.line-green {
					width: 1px;
					height: 35px;
					background: linear-gradient(to bottom, rgba(28, 107, 51, 0.3), rgb(20, 195, 93), rgba(1, 165, 75, 0.89));
				}

				.line-red {
					width: 1px;
					height: 35px;
					background: linear-gradient(to bottom, rgba(123, 44, 28, 0.3), rgba(255, 82, 82, 1), rgba(255, 48, 48, 0.89));
				}
			}
		}
	}
	.home-main {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		display: flex;
		flex-direction: column;
		pointer-events: none;

		.echarts-area {
			flex: 1;
			display: flex;
			padding: 10px 0px;
			position: relative;
			.echarts-info {
				width: 460px;
				height: 920px;
				background: rgba(0, 29, 63, 0.36);
				position: relative;

				.echarts-box {
					width: 100%;
					height: 50%;
				}

				.fullScreen {
					position: absolute;
					bottom: -60px;
					left: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120px;
					height: 30px;
					background-image: url('../../assets/images/home/home-return.svg');
					background-size: 100% 100%;
					font-size: 24px;
					font-family: YouShe;
					color: #c1e1ff;
					line-height: 28px;
					letter-spacing: 2px;
					cursor: pointer;
					pointer-events: all;
				}
			}

			.data-info {
				flex: 1;
				height: 100%;
				padding: 0px 20px;

				.count-list {
					height: 90px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info-box {
						width: 19%;
						height: 100%;
						display: flex;
						justify-content: center;

						.info-img {
							width: 67px;
							height: 48px;
							margin-right: 10px;
						}

						.info-name {
							font-size: 16px;
							font-family: Source Han Sans CN, Source Han Sans CN;
							color: #5a73a7;
							line-height: 16px;
						}

						.info-count {
							margin-top: 5px;
							font-size: 28px;
							font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
							font-weight: bold;
							color: #ddefff;
							line-height: 33px;
							text-shadow: 0px 1px 22px rgba(255, 255, 255, 0.56);
						}
					}
				}

				.change-room {
					width: 60px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px;
					margin-top: 50px;
					background: rgba(0, 78, 169, 0.33);
					box-shadow: inset 0px 0px 9px 0px rgba(214, 235, 255, 0.44);
					border-radius: 2px;

					.room-item {
						margin: 5px;
						font-size: 14px;
						color: #2e579a;
						pointer-events: all;
						.room-title {
							color: #c3daff;
						}
					}
				}
			}
		}
	}
}

@keyframes moveUpDown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(8px);
	}
	100% {
		transform: translateY(0);
	}
}
